<template>
    <!-- 企业客户主账号 -->
    <div class="master-data">
        <el-select
            style="width: 100%;"
            v-model="checkedData"
            filterable
            remote
            reserve-keyword
            :placeholder="parameter.promptTemplate"
            :remote-method="remoteMethod"
            :loading="loading"
            :disabled="readonly"
            value-key="id"
            clearable
            @change="changeData"
            >
            <el-option v-for="item in optionsList" :key="item.id" :label="item.optionName" :value="item"> </el-option>
        </el-select>
    </div>
</template>
<script>
import globalService from "@/services/globalService";
import eventBus from '@/assets/utils/eventBus.js'
export default {
    name: "bCustomerMainAccount",
    props: {
        detail: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        value: [Object, String],
        disabled: Boolean,
        parameter: {
            type: Object,
            default: () => {
                return {}
            } 
        } 
    },
    data(){
        return {
            checkedData: {},
            loading: false,
            optionsList: [],
            readonly: false,
            showFlag: false,
            customerId: null,
        }
    },
    beforeDestroy() {
        eventBus.$off('masterChange');
    },
    created(){
        if(this.value){
            this.setData();
        }
        this.readonly = Boolean(this.$route.query.readonly) || this.disabled
        eventBus.$on('masterChange', (parameter, data) => { 
            if(parameter.parameterNumber === 'signTarget'){
                this.customerId = data.customerId;
                if(this.customerId) {
                    this.remoteMethod();
                }
            }
        })
    },
    methods: {
        remoteMethod(query){
            const templateTypeCode = this.detail.templateTypeCode;
            if(!this.customerId) {
                this.$message.warning(this.$t('请选择客户'));
                return
            }
            globalService.queryProjectDetailRelatedData({ 
                searchValue: query, 
                type: 4, 
                templateTypeCode, 
                customerId: this.customerId 
            }).then(res => {
                if(res.data.resultCode == '0000') {
                    this.optionsList = (res.data.customerInfoList || []).map(it => {
                        return {
                            ...it,
                            code: it.customerCode,
                        }
                    });
                }
            })
        },
        changeData(){
            if(!this.$route.query.readonly){
                eventBus.$emit('masterChange', this.parameter, this.checkedData);
            }
            this.getData();
            this.$emit('changeRule');
        },
        setData() {
            const info = (this.detail.parameterClassifyList || []).find(it => it.parameterClassifyNumber === 'BasicInformation') || {};
            const obj = (info.headerList || []).find(it => it.parameterNumber === 'signTarget') || {};
            if(obj.defaultValue) {
                this.customerId = JSON.parse(obj.defaultValue).customerId;
            }
            this.checkedData = JSON.parse(this.value);
            if(this.checkedData.code || this.checkedData.id){
                this.optionsList = [this.checkedData];
                this.getData();
            }
        },
        getData(){
            const params = {
                customerId: this.checkedData.customerId,
                code: this.checkedData.code,
                companyId: this.checkedData.companyId,
                fullName: this.checkedData.fullName,
                optionName: this.checkedData.optionName,
                id: this.checkedData.id
            }
            this.$emit('input', JSON.stringify(params))
            return params
        }
    }
}
</script>
<style lang="scss"></style>